<template>
	<view class="myVest">
		<view class="vestList">
			<up-swipe-action>
				<up-swipe-action-item v-for="item in vestList" :key="item.id" :options="options" @click="clickFun(item)">
					<view class="vestItem dis p20">
						<view class="userImg">
							<image :src="item.vestAvatar" mode="aspectFill"></image>
						</view>
						<view class="userName p20">{{ item.vestNickname }}</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>
		</view>
		<view class="addVest dis" @click="open"><up-icon name="plus" color="#fff" size="30rpx"></up-icon></view>
	</view>
	<up-popup :show="showPop" mode="bottom" :round="10" @close="close" @open="open">
		<view class="add">
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					马甲图片
				</view>
				<view class="addVale">
					<view class="imgDom dis" @click="uploadImg">
						<image v-if="vestImg" :src="vestImg" mode="aspectFill"></image>
						<image v-else class="imgIcon" src="/pages/static/11.png" mode=""></image>
						<view v-if="vestImg" class="offImg" @click.stop="delImg">x</view>
					</view>
				</view>
			</view>
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					马甲昵称
				</view>
				<view class="addVale">
					<input v-model="vestName" type="text" placeholder-style="color: #cacaca;" placeholder="请填写马甲昵称" />
				</view>
			</view>
			<view class="addBut" @click="addSave">提交</view>
		</view>
	</up-popup>
</template>

<script setup>
import { userVest, deleteUserVest, addVest } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const show = ref();
onLoad((options) => {
	// console.log('options', options);
	userVestFun();
});
onShow(() => {});
// 新增
const vestImg = ref('');
const vestName = ref('');
const showPop = ref(false);
const close = () => {
	showPop.value = false;
};
const open = () => {
	showPop.value = true;
};
const uploadImg = async () => {
	if (!!vestImg.value) return;
	const res = await uploadImage();
	if (res.code == 0) {
		vestImg.value = res.data.imgUrl;
	}
};
const delImg = (item) => {
	vestImg.value = '';
};
const addSave = async () => {
	if (!vestName.value) {
		uni.showToast({
			title: '请输入昵称',
			icon: 'none'
		});
	}
	if (!vestImg.value) {
		uni.showToast({
			title: '请选择图片',
			icon: 'none'
		});
	}
	const data = {
		vestNickname: vestName.value,
		vestAvatar: vestImg.value
	};
	const res = await addVest(data);
	if (res.code == 0) {
		uni.showToast({
			title: '新增成功',
			icon: 'none'
		});
		close();
		userVestFun();
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};

const options = ref([
	{
		text: '删除'
	}
]);
const vestList = ref();
const userVestFun = async () => {
	const res = await userVest();
	// console.log(res.data.list);
	if (res.code == 0) {
		vestList.value = res.data.list;
	}
};
// 删除马甲
const clickFun = async (item) => {
	const res = await deleteUserVest(item.id, {});
	userVestFun();
};
</script>

<style lang="scss" scoped>
.myVest {
	width: 100%;
	.vestList {
		padding-top: 20rpx;
		width: 100%;
		.vestItem {
			align-items: center;
			.userImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f7f7f7;
			}
			.userName {
				font-size: 28rpx;
				color: #676767;
			}
		}
	}
	.addVest {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #01b3f8;
	}
}
.add {
	margin-top: 30rpx;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	.addItem {
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #ededed;
		.addLable {
			margin-right: 30rpx;
			color: #676566;
			font-size: 26rpx;
			text {
				color: #e74133;
			}
		}
		.addVale {
			.imgDom {
				position: relative;
				justify-content: center;
				align-items: center;
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				background-color: #f7f8fa;
				.imgIcon {
					width: 70rpx;
					height: 70rpx;
				}
				.offImg {
					position: absolute;
					right: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 40rpx;
					background: #000;
					color: #fff;
				}
			}
			input {
				font-size: 26rpx;
			}
		}
	}
	.addBut {
		margin: 0 auto;
		margin-top: 40rpx;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #1c9aee;
	}
}
.u-swipe-action-item {
	margin-bottom: 20rpx;
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
</style>
